import React, { Component, PropTypes } from 'react';
import CounterStore from '../stores/CounterStore.js';
import * as Actions from '../Actions.js';

const buttonStyle = {
	margin: "10px"
}

class Counter extends Component {

	constructor(props){
		//1
		console.log('enter contructor: ' + props.caption);
		super(props);

		this.onChange = this.onChange.bind(this);//在这里只要是组件中自定义的函数需要this时都要在这里绑定
		this.onClickIncrementButton = this.onClickIncrementButton.bind(this);
		this.onClickDecrementButton = this.onClickDecrementButton.bind(this);

		// this.state = {
		// 	count: props.initValue
		// }

		//使用flux
		this.state = {
			count: CounterStore.getCounterValues()[props.caption]
		}
	}

	// componentWillReceiveProps(nextProps) {
	// 	//点击触发父组件的this.forceUpdate()时触发
	// 	//当父组件render被调用时子组件就会经历更新过程，不管传给子组件的porps有没有被改变，触发此函数
	// 	console.log('enter componentWillReceiveProps ' + this.props.caption);
	// }

	// componentWillMount() {
	// 	//2
 //    	console.log('enter componentWillMount ' + this.props.caption);
 //  	}

 //  	componentDidMount() {
 //  		//3个组件全部渲染完成才console出来
 //    	console.log('enter componentDidMount ' + this.props.caption);
 //  	}

	// onClickIncrementButton() {
	// 	// this.setState({count: this.state.count + 1});
	// 	this.updateCount(true);
	// }

	// onClickDecrementButton() {
	// 	// this.setState({count: this.state.count - 1});
	// 	this.updateCount(false);
	// }

	// updateCount(isIncrement){
	// 	const previousValue = this.state.count;
	// 	const newValue = isIncrement ? previousValue + 1 : previousValue - 1;
	// 	this.setState({count: newValue});
	// 	//调用父组件的onUpdate函数，将新值和之前的值传入
	// 	this.props.onUpdate(newValue, previousValue);
	// }

	// shouldComponentUpdate(nextProps, nextState) {
	// 	//state改变时会触发，点击触发父组件的this.forceUpdate()(重新绘制)时也会触发 顺序在componentWillReceiveProps后
	// 	//即更新过程，在render之前//
	// 	//返回值是true和false，当是true时重新render，当是false是不重新render
	// 	// console.log("nextProps:"+nextProps.caption+"  nextState:"+nextState.count);
	// 	// console.log(this.props.caption+"   "+this.state.count);
	// 	// console.log(nextProps.caption !== this.props.caption);
	// 	// console.log(nextState.count !== this.state.count);
	// 	return (nextProps.caption !== this.props.caption) ||
	// 	(nextState.count !== this.state.count);
	// }

	//组件的生命周期
	// 装载过程
	// constructor构造函数初始化state 绑定this环境
	// gitInitialState 只会调用一次 gitDefaultProps 这两个方法只有用React.createClass方法创造组件时才会发生作用 返回值分别可以作为state和props的初始值
	// render 渲染函数
	// componentWillMount 将要装载组件时 一般不做处理 所有做的事情都可以放在constructor中 
	// componentDidMount render返回的东西已经引发了渲染组件已经装载在DOM上了 可以做浏览器端做的逻辑 比如通过AJAX获取数据来填充组件的内容
	// 					组件已经装载到DOM树上可以放系获取渲染出来的任何DOM比如和jQuery结合就是利用此函数
	// 更新过程
	// componentWillReceiveProps(nextProps) 只要是父组件的render函数被调用，在render中被渲染的子组件都会经历更新过程 不管父组件传递的props有没有改变都会触发componentWillReceiveProps函数
	// 					注意this.setState方法的更新不会触发此函数，以为这个函数是根据新的props值(nextProps)来计算是不是要更新内部的state
	// shouldComponentUpdate(nextProps,nextState) 这个函数很重要决定组件什么时候不需要渲染 这个函数返回一个布尔值，true继续更新组件调用render函数，false停止更新过程
	// 					利用组件的props,state值(nextProps,nextState)和this.props,this.state值判断返回true还是false
	// componentWillUpdate
	// render
	// componentDidUpdate 当和比如jQuery结合时，当组件被更新时此函数再次调用jQuery代码
	// 卸载过程
	// componentWillUNmount 当组件在DOM树上被删除掉之前此函数会被调用做一些清理工作，比如用非React方法创造了一些DOM元素如果不管可能会造成内存泄漏

	//使用flux
	//组件被加载DOM树上是在Store上监听onChange函数 onChange的函数 组件卸载时删除Store上的函数

  	componentDidMount() {
  		CounterStore.addChangeListener(this.onChange);
  	}
  	componentWillUNmount() {
  		CounterStore.removeChangeListener(this.onChange);
  	}
  	onChange() {
  		const newCount = CounterStore.getCounterValues()[this.props.caption];
  		this.setState({count: newCount});
  	}

	onClickIncrementButton() {
		Actions.increment(this.props.caption);
	}

	onClickDecrementButton() {
		Actions.decrement(this.props.caption);
	}

	render() {
		//3 state改变重新render
		console.log("enter render " + this.props.caption);
		const {caption} = this.props;
		return (
			<div>
			<button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>
			<button style={buttonStyle} onClick={this.onClickDecrementButton}>-</button>
			<span>{caption} count:{this.state.count}</span>
			</div>
		);
	}

};

Counter.propTypes = {
	caption: PropTypes.string.isRequired,
	// initValue: PropTypes.number,
	// onUpdate: PropTypes.func
}

// Counter.defaultProps = {
// 	initValue: 0,
// 	onUpdate: f => f //默认是一个什么都不做的函数
// }

export default Counter;
